<template>
  <div class="app-container">
    <el-row :gutter="5" class="mb8">
      <el-col :span="4">
        <!-- 过滤组织机构树搜索框 -->
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

        <!-- 组织机构树 -->
        <el-tree
          class="filter-tree"
          :data="treeList"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </el-col>

      <el-col :span="20">
        <!-- 按钮 -->
        <div class="tools-div">
          <el-button type="success" icon="el-icon-plus" size="mini" @click="addDept()">添 加</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteDept">删除</el-button>
        </div>
        <!-- 某机构下的人员列表 -->
        <el-table
          v-loading="listLoading"
          :data="list"
          stripe
          border
          style="width: 100%;margin-top: 10px;"
          @selection-change="listHandleSelectionChange"
        >
          <!-- 表格复选框 -->
          <el-table-column type="selection" />
          <el-table-column label="序号" width="70" align="center">
            <template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template>
          </el-table-column>

          <el-table-column prop="username" label="用户名" width="180" />
          <el-table-column prop="name" label="姓名" width="110" />
          <el-table-column prop="phone" label="手机" />
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status === 1"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          :current-page="page"
          :total="total"
          :page-size="limit"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change="fetchData"
        />

        <!-- 添加弹框 -->
        <el-dialog title="人员挂在某机构下" :visible.sync="dialogVisible" width="90%">
          <!-- 列表 -->
          <el-table
            v-loading="listLoading"
            :data="sysUserList"
            stripe
            border
            style="width: 100%;margin-top: 10px;"
            @selection-change="handleSelectionChange"
          >
            <!-- 表格复选框 -->
            <el-table-column type="selection" />
            <el-table-column label="序号" width="70" align="center">
              <template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template>
            </el-table-column>

            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="name" label="姓名" width="110" />
            <el-table-column prop="phone" label="手机" />
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status === 1"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>

          <!-- 分页组件 -->
          <el-pagination
            :current-page="page"
            :total="totalDialog"
            :page-size="limit"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="dialogFetchData"
          />

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDeptOfUser()">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dept from "@/api/dept/dept.js";
import userApi from "@/api/user/user.js";

export default {
  data() {
    return {
      filterText: "",
      treeList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      list: [],
      dialogVisible: false,
      listLoading: false, //是否显示加载
      searchObj: {},
      sysUserList: [],
      total: 0, //总记录数
      page: 1, //当前页
      limit: 3, //每页显示的记录数
      totalDialog: 0,
      deptId: 0,
      obj: {},
      selectUserList: [],
      selectValueArr: [], //复选框多选存储封装的数据
      selectValueList: [], //复选框多选存储封装的数据
    };
  },
  //页面渲染之前执行
  created() {
    //调用列表方法
    this.fetchListTree();
    this.deptId = 10;
    this.fetchData(1);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //
    addDept() {
      this.dialogFetchData(1);
    },
    dialogFetchData(pageNum = 1) {
      this.dialogVisible = true;
      this.page = pageNum;
      this.searchObj = {};
      userApi
        .fetchData(this.page, this.limit, this.searchObj)
        .then((response) => {
          this.listLoading = false;
          //数据列表
          this.sysUserList = response.data.records;
          //总数
          this.totalDialog = response.data.total;
          this.dialogVisible = true;
        });
    },
    //提交用户绑定到某个机构下
    saveDeptOfUser() {
      if (this.selectValueArr.length == 0) {
        this.$message.warning("请选择需要绑定的用户");
        return;
      }
      let userIdList = [];
      for (var i = 0; i < this.selectValueArr.length; i++) {
        var obj = this.selectValueArr[i];
        userIdList.push(obj.id);
      }
      let paramMap = {
        userIdList: userIdList,
        deptId: this.deptId,
      };
      userApi.batchUpdateDept(paramMap).then((response) => {
        //提示
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //关闭弹框
        this.dialogVisible = false;
        //刷新数据
        this.fetchData(1);
      });
    },
    deleteDept() {
      if (this.selectValueList.length == 0) {
        this.$message.warning("请选择需要解绑的用户");
        return;
      }
      this.$confirm(
        "此操作将永久解绑该用户与当前机构的关系, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let userIdList = [];
        for (var i = 0; i < this.selectValueList.length; i++) {
          var obj = this.selectValueList[i];
          userIdList.push(obj.id);
        }
        let paramMap = {
          userIdList: userIdList,
          deptId: null,
        };
        alert(JSON.stringify(paramMap));
        //发ajax请求
        userApi.batchUpdateDept(paramMap).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新页面
          this.fetchData();
        });
      });
    },
    fetchListTree() {
      dept.fetchListTree().then((response) => {
        this.treeList = response.data;
      });
    },
    fetchData(pageNum = 1) {
      this.searchObj.deptId = this.deptId;
      this.page = pageNum;
      userApi
        .fetchData(this.page, this.limit, this.searchObj)
        .then((response) => {
          this.listLoading = false;
          console.log(response.data.records);
          //数据列表
          this.list = response.data.records;
          //总数
          this.total = response.data.total;
        });
    },
    //点击某个节点时
    handleNodeClick(obj, node, arr) {
      this.deptId = obj.id;
      this.fetchData(1);
    },
    //复选框发生变化就会被触发
    handleSelectionChange(selection) {
      this.selectValueArr = selection;
    },
    listHandleSelectionChange(selection) {
      this.selectValueList = selection;
    },
  },
};
</script>